<template>
  <el-input
    v-if="type === ControlType.input.value"
    v-model="inputVal"
    v-bind="controlSet"
    @change="change"
  />
  <component
    :is="'cont_'+ control.ColId"
    v-else-if="type === ControlType.customize.value"
    ref="auditForm"
    v-model="inputVal"
    v-bind="controlSet"
    @change="change"
  />
  <el-input-number
    v-else-if="type === ControlType.number.value"
    v-model="inputVal"
    v-bind="controlSet"
    @change="change"
  />
  <el-input
    v-else-if="type === ControlType.text.value"
    v-model="inputVal"
    type="textarea"
    v-bind="controlSet"
    :maxlength="controlSet.maxlength"
    show-word-limit
    @change="change"
  />
  <span v-else-if="type === ControlType.label.value && value != null" :key="ver">{{
    inputVal
  }}</span>
  <span v-else-if="type === ControlType.hidden.value && value != null" :key="ver">{{
    inputVal
  }}</span>
  <el-date-picker
    v-else-if="type === ControlType.date.value"
    v-model="inputVal"
    type="date"
    v-bind="controlSet"
    @change="change"
  />
  <el-date-picker
    v-else-if="type === ControlType.dateTime.value"
    v-model="inputVal"
    type="datetime"
    v-bind="controlSet"
    @change="change"
  />
  <el-time-select
    v-else-if="type === ControlType.time.value"
    v-model="inputVal"
    v-bind="controlSet"
    @change="change"
  />
  <el-switch
    v-else-if="type === ControlType.switch.value"
    v-model="inputVal"
    v-bind="controlSet"
    @change="change"
  />
  <empInput
    v-else-if="type === ControlType.emp.value"
    v-model="inputVal"
    v-bind="controlSet"
    :company-id="compId"
    :dept-id="deptId"
    :unit-id="unitId"
    @change="changeExtend"
  />
  <deptSelect
    v-else-if="type === ControlType.dept.value"
    v-model="inputVal"
    v-bind="controlSet"
    :company-id="compId"
    @change="changeExtend"
  />
  <fileUpBtn
    v-else-if="type === ControlType.upload.value && controlSet['fileKey'] != null"
    v-model="fileId"
    v-bind="controlSet"
  />
  <companySelect
    v-else-if="type === ControlType.company.value"
    v-model="inputVal"
    v-bind="controlSet"
    @change="changeExtend"
  />
  <el-checkbox-group v-else-if="type === ControlType.checkbox.value" v-model="inputVal" v-bind="controlSet" @change="change">
    <template v-if="controlSet.isButton">
      <el-checkbox-button v-for="(item, index) in itemList" :key="index" :label="item.value">{{ item.text }}</el-checkbox-button>
    </template>
    <template v-else>
      <el-checkbox v-for="(item, index) in itemList" :key="index" :label="item.value">{{ item.text }}</el-checkbox>
    </template>
  </el-checkbox-group>
  <el-radio-group v-else-if="type === ControlType.radio.value" v-model="inputVal" @change="change">
    <template v-if="controlSet.isButton">
      <el-radio-button v-for="(item, index) in itemList" :key="index" :label="item.value">{{ item.text }}</el-radio-button>
    </template>
    <template v-else>
      <el-radio v-for="(item, index) in itemList" :key="index" :label="item.value">{{ item.text }}</el-radio>
    </template>
  </el-radio-group>
  <el-select v-else-if="type === ControlType.select.value" v-model="inputVal" v-bind="controlSet" @change="change">
    <el-option v-for="(item, index) in itemList" :key="index" :label="item.text" :value="item.value" />
  </el-select>
</template>

<script>
import Vue from 'vue'
import { ControlType } from '@/customForm/config/formConfig'
import empInput from '@/components/emp/empInput.vue'
import deptSelect from '@/components/unit/deptSelect.vue'
import companySelect from '@/components/company/companySelect.vue'
import fileUpBtn from '@/components/fileUp/FileUpBtn.vue'
export default {
  components: {
    empInput,
    deptSelect,
    companySelect,
    fileUpBtn
  },
  props: {
    control: {
      type: Object,
      default: null
    },
    source: {
      type: Object,
      default: null
    },
    value: {
      default: null
    }
  },
  data() {
    return {
      ControlType,
      type: 0,
      inputVal: null,
      controlSet: {},
      itemList: [],
      compId: null,
      ver: 0,
      deptId: null,
      fileId: [],
      unitId: null
    }
  },
  computed: {
    comName() {
      const comId = this.$store.getters.curComId
      return this.$store.getters.company[comId]
    },
    comId() {
      return this.$store.getters.curComId
    },
    user() {
      return this.$store.getters.user
    }
  },
  watch: {
    control: {
      handler(val) {
        if (val) {
          this.reset()
        } else {
          this.type = 0
        }
      },
      immediate: true
    },
    'control.ColType': {
      handler(val) {
        this.reset()
      },
      immediate: false
    },
    'control.ControlSet': {
      handler(val) {
        this.reset()
      },
      deep: true,
      immediate: false
    }
  },
  mounted() {},
  methods: {
    change(e) {
      this.$emit('input', e)
    },
    changeExtend() {
      this.$emit('input', this.inputVal)
    },
    initControl() {
      const that = this
      const key = 'cont_' + this.control.ColId
      Vue.component(key, function(resolve, reject) {
        require(['@/' + that.control.EditControl + '.vue'], resolve)
      })
    },
    reset() {
      const set =
        this.control.ControlSet != null ? this.control.ControlSet : {}
      delete set.showwordlimit
      set.placeholder = this.control.Description
      if (this.control.ColType === ControlType.dateTime.value) {
        if (set.dateFormat == null) {
          set.dateFormat = 'yyyy-MM-dd'
        }
        if (set.timeFormat == null) {
          set.timeFormat = 'HH:mm:ss'
        }
        set.format = set.dateFormat + ' ' + set.timeFormat
        set['value-format'] = 'yyyy-MM-dd HH:mm:ss'
        delete set.dateFormat
        delete set.timeFormat
      } else if (this.control.ColType === ControlType.date.value) {
        set['value-format'] = 'yyyy-MM-dd'
      } else if (
        this.control.ColType === ControlType.dept.value &&
        set.BindComId !== null
      ) {
        this.initDept(set)
      } else if (
        this.control.ColType === ControlType.emp.value
      ) {
        this.initEmp(set)
      } else if (
        this.control.ColType === ControlType.checkbox.value ||
        this.control.ColType === ControlType.radio.value ||
        this.control.ColType === ControlType.select.value
      ) {
        this.itemList = set.items
      } else if (this.control.ColType === ControlType.customize.value) {
        this.initControl()
      }
      this.inputVal = this.getDefVal()
      this.formatSet(set)
      if (this.control.ColType === ControlType.dateTime.value) {
        console.log(set)
      }
      this.controlSet = set
      this.type = this.control.ColType
      this.ver = this.ver + 1
      this.$emit('input', this.inputVal)
    },
    formatSet(set) {
      if (this.control.ColType === ControlType.number.value) {
        if (set.min === set.max && set.min === 0) {
          delete set.min
          delete set.max
        } if (set.min > set.max && set.max === 0) {
          delete set.max
        }
      }
    },
    initEmp(set) {
      if (set['limitType'] === '' || set['limitType'] == null) {
        this.compId = this.comId
        this.deptId = null
        this.unitId = null
      } else {
        this.compId = set['limitComId']
        this.deptId = set['limitDeptId']
        this.unitId = set['limitUnitId']
      }
    },
    initDept(set) {
      if (this.source[set.BindComId] != null) {
        this.compId = this.source[set.BindComId]
      } else {
        this.compId = this.comId
      }
      const that = this
      this.$watch(
        () => {
          return this.source[set.BindComId]
        },
        (newVal, oldVal) => {
          if (newVal !== oldVal && oldVal) {
            that.compId = newVal
          }
        },
        { immediate: false }
      )
    },
    getDefVal() {
      if (this.control.DefaultVal === '[curTime]') {
        return new Date()
      } else if (this.control.DefaultVal === '[empId]') {
        return this.user.empId
      } else if (this.control.DefaultVal === '[company]') {
        return this.comName
      } else if (this.control.DefaultVal === '[companyId]') {
        return this.user.companyId
      } else if (this.control.DefaultVal === '[unitDept]') {
        return this.user.unitDept
      } else if (this.control.DefaultVal === '[unitId]') {
        return this.user.unitId
      } else if (this.control.DefaultVal === '[deptId]') {
        return this.user.deptId
      } else if (this.control.DefaultVal === '[unit]') {
        const index = this.user.unitDept.indexOf('-')
        return this.user.unitDept.substring(0, index)
      } else if (this.control.DefaultVal === '[dept]') {
        const index = this.user.unitDept.indexOf('-')
        return this.user.unitDept.substring(index + 1)
      } else if (this.control.DefaultVal === '[post]') {
        return this.user.post
      } else if (this.control.DefaultVal === '[empName]') {
        return this.user.name
      } else if (this.control.DefaultVal === '[comId]') {
        return this.comId
      } else if (this.control.ColType === ControlType.dept.value && this.control.DefaultVal != null) {
        const t = this.control.DefaultVal.split('-')
        this.compId = t[0]
        return t[1]
      } else if (this.control.ColType === ControlType.checkbox.value && this.control.DefaultVal != null) {
        return this.control.DefaultVal.split('-')
      }
      return this.control.DefaultVal
    }
  }
}
</script>
